<template>
    <div class="bi-wave-panel" :style="{'background-color': bgColor}">
        <div class="bi-wave-panel__main">
            <slot></slot>
        </div>
        <div class="bi-wave-panel__bgimg"></div>
    </div>
</template>
<script>
export default {
    name: 'BiWavePanel',
    props: {
        bgColor: {
            type: String
        }
    }
}
</script>
<style lang="scss">
.bi-wave-panel{
    position: relative;
    border-radius: 6px;
    box-shadow: 0 0 9px rgba(0,0,0,.2);
}
.bi-wave-panel__main{
    position: relative;
    z-index: 3;
}
.bi-wave-panel__bgimg{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    &:after{
        content: '';
        left: -120px;
        bottom: 0;
        right: 0;
        width: calc(1920px + 154px);
        height: 78px;
        position: absolute;
        background: url('./wave-panel-bg.svg') no-repeat 0 0;
        background-size: 92%;
        opacity: .12;
    }
}
</style>